<template>
  <div class style="height: 100%;pointer-events: auto;">
    <el-popover
      placement="top-start"
      width="600"
      trigger="click"
      style="position: absolute;top: 100px;left: 20px;"
    >
      <div style="text-align: left;">
        <el-divider>操作</el-divider>
        <!-- <el-card style> -->
        <el-button type="primary" @click="flyto">飞到阀门</el-button>
        <el-button type="primary" @click="flyaround">绕点旋转</el-button>
        <el-button type="primary" @click="iflujing = !iflujing">路径播放</el-button>
        <el-button type="primary" @click="_earth.cameraViewManager.views[2].flyTo()">默认视角</el-button>
        <el-button type="primary" @click="_earth.cameraViewManager.views[3].flyTo()">地下视角</el-button>
        <!-- </el-card> -->
      </div>

      <div slot="reference">
        <i class="el-icon-setting" style="cursor: pointer;font-size: 30px;color: chartreuse;"></i>
      </div>
    </el-popover>

    <el-card class="box-card" style="position: absolute;top: 200px;left: 20px;" v-if="iflujing">
      <el-button type="primary" @click="$parent.playing = !$parent.playing">播放/暂停</el-button>
      <el-divider></el-divider>
      <el-button type="primary" @click="_earth.cameraViewManager.views[1].flyTo()">顶部视角</el-button>
      <el-divider></el-divider>
      <el-button type="primary" @click="$parent.cameraAttachedClick">相机绑定</el-button>
      <el-divider></el-divider>
      <span @click="$parent.show = !$parent.show" class="checkbox">
        <input class="fly" type="checkbox" v-model="$parent.show" />路径显隐
      </span>
      <el-divider></el-divider>
      <span>当前速度: {{ $parent.currentSpeed }}m/s</span>
      <el-divider></el-divider>
      <span>
        <input type="range" min="0" max="100" step="1" v-model.number="$parent.currentSpeed" />
      </span>
      <el-divider></el-divider>
      <span>当前位置：{{$parent.currentD | numFilter}}米</span>
    </el-card>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";

import echarts from "echarts";

export default {
  name: "erciwangsetting1",
  props: {
    diahtml: "",
    options: {},
  },
  components: {},
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    }
  },
  data() {
    return {
      winPos: [0, 0, 0, 0],
      showInfo: false,
      showInfocam: false,
      uniqueID: "",
      iflujing: false,
      _earth:{}
    };
  },
  computed: {},
  created() {
    this.uniqueID = uuidv1();
  },
  watch: {

  },
  mounted() {
    this._earth = this.$parent._earth
    console.log("9999999999999");
  },
  methods: {

    flyto() {
      this._earth.cameraViewManager.views[0].flyTo();
    },
    flyaround() {
      this._earth.camera.flyAround(
        [(116.4424863 * Math.PI) / 180, (39.8420112 * Math.PI) / 180, 6],
        1000,
        [(360.0 * Math.PI) / 180, (-22 * Math.PI) / 180, 0],
        0.5,
        0.1
      );
    },

    
    loadchart() {},

    closebox() {

    },
  },
};
</script>
<style lang='scss' scoped>
.cardnengliudiv {
  .cardnengliudivinner {
    background-image: url("/configuration/cesium//linglong/changqu.png");
    width: 170px;
    height: 180px;
    color: white;
    background-size: 100% 100%;
    padding: 5px;
    border-radius: 5px;
  }
  background-color: #11183caa;
  padding: 5px;
  //  position: relative;
  //  width: 180px;
  //  height: 190px;
  position: absolute;
  // cursor: pointer;
}
</style>